<template>
	<view :style="{ height: `${statusBarHeight}px` }"></view>
	<view :style="{
	         height: `${barHeight}px`,
	         'line-height': `${barHeight}px`,
	       }">
		 <slot></slot>
	</view>

</template>

<script setup>
	import {
		computed
	} from 'vue';

	const statusBarHeight = computed(() => uni.getSystemInfoSync().statusBarHeight)

	const {
		top,
		height
	} = wx.getMenuButtonBoundingClientRect();
	const barHeight = height ? height + (top - statusBarHeight.value) * 2 : 38;
</script>

<style>

</style>